<template>
    <u-swiper
        :list="getList"
        :autoplay="autoplay"
        :interval="interval"
        :indicator="true"
        indicatorMode="line"
        :height="getHeight"
        bgColor="transparent"
        keyName="image_url"
        radius="5"
        circular
        @click="swiperClick"
    ></u-swiper>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "@/hooks/useRoute";
import { getUrl } from "@/utils/common";

interface bannerItem {
    image_url: string;
    link?: string;
    name?: string;
}

interface styleType {
    height?: {
        // 轮播图高度
        type: Number;
        default: () => 350;
    };
}

const props = defineProps<{
    list: {
        //列表数据
        type: bannerItem;
        default: () => [];
    };
    style: {
        //列表样式
        type: styleType;
        default: () => {};
    };
    autoplay: {
        //是否自动切换
        type: Boolean;
        default: () => true;
    };
    interval: {
        //轮播图自动切换间隔时间
        type: Number;
        default: () => 5000;
    };
}>();

// 处理数据
const getList = computed(() => {
    for (let index in props.list) {
        if (props.list[index]["image_url"])
            props.list[index]["image_url"] = getUrl(
                props.list[index]["image_url"]
            );
        if (props.list[index]["name"])
            props.list[index]["title"] = getUrl(props.list[index]["name"]);
    }
    return props.list;
});

const getHeight = computed(() => {
    return props.style["height"] + "px";
});

const swiperClick = (index) => {
    let link = props.list[index]?.link || "";
    if (link) useRoute().jumpTo({ url: link, type: "navigateTo" });
};
</script>

<style lang="scss" scoped></style>
